<template>
  <div class="gdap-choose" id="gdapChoose">
    <div style="visibility:hidden;min-height: 36px;"></div>
    <el-form ref="estimateForm" :model="estimateForm" :rules="formRules">
      <div>
        <el-row>
          <el-col :span="6" style="min-height: 36px;"></el-col>
          <el-col :span="6" style="align: center; min-height: 36px; text-align: center;">
            <h3 style="font-size: 30px;">语言</h3>
            <el-form-item>
              <el-select v-model="estimateForm.languageValue" placeholder="Select">
                <el-option
                  v-for="item in languageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="align: center; min-height: 36px; text-align: center;">
            <h3 style="font-size: 30px;">科类</h3>
            <el-form-item>
              <el-select v-model="estimateForm.cateValue" placeholder="Select">
                <el-option
                  v-for="item in cateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
      </div>
      <div class="gdap-estimatescore" v-if="beforeVersion">
        <el-row style="margin-top: 5vh;">
          <el-col :span="6">&nbsp;</el-col>
          <el-col :span="12">
            <el-form-item prop="score">
              <h3 style="font-size: 30px;">预计分数</h3>
              <el-input placeholder="请输入你的高考分数" v-model.number="estimateForm.score" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-show="estimateRate">
            <p style="color:red">预估排名为{{estimateForm.rate}}</p>
          </el-col>

          <el-col :span="24" v-if="!estimateRate">
            <p>&nbsp;</p>
          </el-col>
        </el-row>
      </div>
      <div class="gdap-estimatescore" v-if="afterVersion">
        <el-row>
          <el-col :span="7" style="min-height: 36px;"></el-col>
          <el-col :span="4" style="align: center; min-height: 36px; text-align: center;">
            <h3 style="font-size: 30px;">分数</h3>
            <el-form-item prop="score">
              <el-input placeholder="请输入你的高考分数" v-model.number="estimateForm.score"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">&nbsp;</el-col>
          <el-col :span="4" style="align: center; min-height: 36px; text-align: center;">
            <h3 style="font-size: 30px;">排名</h3>
            <el-form-item prop="rate">
              <el-input placeholder="请输入你的实际排名" v-model.number="estimateForm.rate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"></el-col>
        </el-row>
        <el-col :span="24" v-if="!estimateRate">
          <p>&nbsp;</p>
        </el-col>
      </div>
      <div class="gdap-submit-score">
        <el-button @click="backToHome">返回首页</el-button>
        <el-button type="success" @click="toArea('estimateForm')">下一步</el-button>
      </div>
    </el-form>
    <div style="visibility:hidden;min-height: 72px;"></div>
  </div>
</template>

<script>
import api from "@/utils/api";
import { categoryList, languageList, VERSION_NO } from "@/constants/constants";
export default {
  data() {
    var checkScore = (rule, value, cb) => {
      if (!value && value !== 0) {
        return cb(new Error("必须填写分数"));
      }
      setTimeout(() => {
        if (Number(value) <= 0 || Number(value) > 750) {
          cb(new Error("请填写1到750之间的整数"));
        } else {
          cb();
        }
      });
    };
    var checkRate = (rule, value, cb) => {
      if (!value) {
        return cb(new Error("必须填写排名"));
      }
      setTimeout(() => {
        if (Number(value) <= 0 || Number(value) > 100000) {
          cb(new Error("请填写1到100000之间的整数"));
        } else {
          cb();
        }
      });
    };
    return {
      beforeVersion: false,
      afterVersion: false,
      languageOptions: languageList,
      cateOptions: categoryList,
      estimateForm: {
        languageValue: localStorage.getItem("user")
          ? JSON.parse(localStorage.getItem("user")).yzmc
          : "",
        cateValue: localStorage.getItem("user")
          ? JSON.parse(localStorage.getItem("user")).kldm
          : "",
        score: "",
        rate: ""
      },
      formRules: {
        score: [
          { validator: checkScore, trigger: "blur" },
          { type: "number", message: "请填入1~750之间的整数" }
        ],
        rate: [
          { validator: checkRate, trigger: "blur" },
          { type: "number", message: "实际排名必须为整数" }
        ]
      },
      estimateRate: false
    };
  },
  mounted() {
    if (this.estimateForm.score.length > 0) {
      this.estimateRate = true;
    }
    this.beforeVersion = VERSION_NO === 0 ? true : false;
    this.afterVersion = VERSION_NO === 1 ? true : false;
  },
  methods: {
    backToHome() {
      this.$router.push("/");
      this.$store.state.common.stepIndex = 0;
    },
    toArea(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid, " valid form");
        if (valid) {
          for (const i in categoryList) {
            if (categoryList[i].value === this.estimateForm.cateValue) {
              this.$store.dispatch("estimate/getKldm", categoryList[i]);
            }
          }
          this.$store.dispatch("common/nextStep");
          this.$store.dispatch("estimate/getZf", this.estimateForm.score);
          this.$store.dispatch(
            "estimate/getYzmc",
            this.estimateForm.languageValue
          );

          this.$store.dispatch("estimate/getPx", this.estimateForm.rate);
          this.$router.push("/step/choosearea");
        } else {
          return false;
        }
      });
    }
  },

  watch: {
    estimateForm: {
      handler: function(old, newVal) {
        if (VERSION_NO === 0) {
          this.estimateRate =
            old.score > 0 && old.score !== "" && old.score <= 750
              ? true
              : false;
          if (
            this.estimateForm.cateValue !== null &&
            this.estimateForm.languageValue !== null
          ) {
            api({
              url: "/nceeSysMgr/rest/sendGet/analysis/rest/getEstimatePx",
              method: "get",
              params: {
                zf: old.score,
                yzmc: old.languageValue,
                kldm: old.cateValue
              }
            })
              .then(res => {
                this.estimateForm.rate = res.status === 200 ? res.data.px : "";
                localStorage.setItem("hpx", res.data.hpx);
                console.log(res, " estimate score");
              })
              .catch(e => {
                console.error(e);
              });
          }
        }
      },
      deep: true
    }
  }
};
</script>

<style>
.gdap-choose {
  background: #F0EEEF;
}
.gdap-estimatescore {
  align: center;
  text-align: center;
  padding-bottom: 3vh;
}
.gdap-submit-score {
  width: 30%;
  align: center;
  margin: 4vh auto 0;
  padding-top: 2vh;
}
.el-checkbox-button:last-child .el-checkbox-button__inner {
  border-radius: 0;
}
</style>
